<template>
	<view class="content">
		<movable-area class="movable-area-new">
			<movable-view :x="x" :y="y" class="movable-view-new" direction="all" @change="onChange">
				<view class="com-customer" @click="customer">
					<image src="https://xiaoshan-hospital.oss-cn-hangzhou.aliyuncs.com/64b634948b653fc18db3459dab2bf0122f0dbb0b951e28ae608d88a6aea94351.png" alt="" />
					<view class="customer-text">智 慧客 服</view>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		getCurrentInstance
	} from "vue";

	const x = ref(320)
	const y = ref(400)

	function onChange(event: { detail: { x: any; y: any; }; }) {
		this.x = event.detail.x;
		this.y = event.detail.y;
	}

	const { proxy } : any = getCurrentInstance();

	function customer() {
		proxy.utils.uni.route.go("/pages-hospital-services/ai-robot/index");
	}
</script>

<style lang="scss" scoped>
	.com-customer {
		position: relative;
		border-radius: 15rpx;
		padding:65rpx 10rpx 10rpx 10rpx;
		text-align: center;
		background-color: #eff4ff;
		box-shadow: 5px 0 10px rgab(0, 0, 0, 0.2);
		border: 2rpx solid #c7d6ff;
		pointer-events:auto;
		width: 85rpx;
		image{
			width: 100rpx;
			height: 100rpx;
			position: absolute;
			top: -30rpx;
			left: -10rpx;
		}
		.customer-text{
			color: #3876e8;
			font-size: 26rpx;
		}
	}
	.movable-area-new {
		width: 92%;
		height: 80%;
		z-index: 0;
		position: fixed;
		left: 30rpx;
		top: 300rpx;
		z-index: 99;
		pointer-events:none;
		.movable-view-new {
			width: 100rpx;
			height: 150rpx;
		}
	}
</style>